Node / mirrors / respira / files / src / components / WorkflowStepper / StepPopover.tsx

Displaying Raw • Download

/**

* StepPopover Component

*

* Renders the guidance popover with dynamic content based on step and machine status

*/

import { forwardRef } from "react";

import { MachineStatus } from "../../types/machine";

import { getGuideContent } from "../../utils/workflowGuideContent";

import {

InfoCard,

InfoCardTitle,

InfoCardDescription,

InfoCardList,

InfoCardListItem,

} from "../InfoCard";

export interface StepPopoverProps {

stepId: number;

machineStatus: MachineStatus;

}

export const StepPopover = forwardRef<HTMLDivElement, StepPopoverProps>(

({ stepId, machineStatus }, ref) => {

const content = getGuideContent(stepId, machineStatus);

if (!content) return null;

// Map content type to InfoCard variant

const variantMap = {

info: "info",

success: "success",

warning: "warning",

error: "error",

progress: "info",

} as const;

const variant = variantMap[content.type];

return (

<div

ref={ref}

className="absolute top-full mt-4 left-1/2 transform -translate-x-1/2 w-full max-w-xl z-50 animate-fadeIn"

role="dialog"

aria-label="Step guidance"

>

<InfoCard variant={variant} className="shadow-xl">

<InfoCardTitle variant={variant}>{content.title}</InfoCardTitle>

<InfoCardDescription variant={variant}>

{content.description}

</InfoCardDescription>

{content.items && content.items.length > 0 && (

<InfoCardList variant={variant}>

{content.items.map((item, index) => {

// Parse **text** markdown syntax into React elements safely

const parts = item.split(/(\\*\\*.*?\\*\\*)/);

return (

<InfoCardListItem key={index}>

{parts.map((part, i) => {

if (part.startsWith("**") && part.endsWith("**")) {

return <strong key={i}>{part.slice(2, -2)}</strong>;

}

return part;

})}

</InfoCardListItem>

);

})}

</InfoCardList>

)}

</InfoCard>

</div>

);

},

);

StepPopover.displayName = "StepPopover";